<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.3/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.3/minemap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        #search{
            position: absolute;
            top: 20px;
            left:100px;
            z-index: 999;
        }
        #search input{
            outline: none
        ;
        }
    </style>
</head>

<body>
<div id="search">
    <input type="text" id="search-value">
    <input type="button" value="搜索" id="search-btn">
</div>
<div id="map"></div>
</body>
<script>
    /**
     * 基本地图加载
     * 地图缩放级别限制
     */
    minemap.accessToken = 'e919a6f32ce242f5aec22652d9dc1fdb';
    minemap.solution = 3285;
    var map = new minemap.Map({
        container: 'map',
        style: "http://minedata.cn/service/solu/style/id/3285",
        center: [107.163663,26.1696838],
        zoom: 6,
        minZoom: 5,
        maxZoom: 7,
        pitch: 0
    });
    var searchBtn = document.getElementById('search-btn');
    map.on('load',function () {
        searchBtn.onclick = stereoscopic

    });
    function  stereoscopic() {
        if (map.getSource("guizhou")) {
            map.removeSource('guizhou');
            map.removeLayer('line-shadow');
            map.removeLayer('outline');
            map.removeLayer('polygon');
        }
        var searchVal = document.getElementById('search-value').value;
        if(searchVal == '贵州'){
            addMap1()
        }else if(searchVal == '六盘水'){
            addMap2()
        }else if(searchVal == '钟山区'||searchVal == '六枝特区'){
            addMap3(searchVal)
        }else{
            return
        }

    }


    function addMap1(){
        map.addSource('guizhou',{
            type:'geojson',
            data:'guizhousheng.json'
        });
        map.addLayer({
            id:'line-shadow',
            source:"guizhou",
            type:'line',
            paint:{
                "line-color":'rgba(125,125,125,.9)',
                "line-width":5,
                "line-translate":[3,7]

            },
            layout:{
                'line-cap':'round',
                "line-join": "round"
            },
            filter:['==','$type','LineString']


        },'a7371364f61c45c294b7571c141eaf2f');
        map.addLayer({
            id:'outline',
            source:"guizhou",
            type:'line',
            paint:{
                "line-color":'#fff',
                "line-width":3
            },
            filter:['==','$type','LineString']

        });
        map.addLayer({
            id:'polygon',
            source:"guizhou",
            type:'fill',
            paint:{
                "fill-color": "#f9f5ed"
            },
            filter:['==','$type','Polygon']

        },"a7371364f61c45c294b7571c141eaf2f")
    }
    function addMap2(){
        map.addSource('guizhou',{
            type:'geojson',
            data:'liupanshuishi.json'
        });
        map.addLayer({
            id:'line-shadow',
            source:"guizhou",
            type:'line',
            paint:{
                "line-color":'rgba(125,125,125,.9)',
                "line-width":5,
                "line-translate":[3,7]

            },
            layout:{
                'line-cap':'round',
                "line-join": "round"
            },
            filter:['==','$type','LineString']


        },'a7371364f61c45c294b7571c141eaf2f');
        map.addLayer({
            id:'outline',
            source:"guizhou",
            type:'line',
            paint:{
                "line-color":'#fff',
                "line-width":3
            },
            filter:['==','$type','LineString']

        });
        map.addLayer({
            id:'polygon',
            source:"guizhou",
            type:'fill',
            paint:{
                "fill-color": "#f9f5ed"
            },
            filter:['==','$type','Polygon']

        },"a7371364f61c45c294b7571c141eaf2f")
    }
    function addMap3(searchVal){
        map.addSource('guizhou',{
            type:'geojson',
            data:'quxian.json'
        });
        map.addLayer({
            id:'line-shadow',
            source:"guizhou",
            type:'line',
            paint:{
                "line-color":'rgba(125,125,125,.9)',
                "line-width":5,
                "line-translate":[3,7]
            },
            layout:{
                'line-cap':'round',
                "line-join": "round"
            },
//            filter:['==','$type','LineString']
            filter: ["all", ['==','$type','LineString'], ["==", "Name", searchVal]]

        },'a7371364f61c45c294b7571c141eaf2f');
        map.addLayer({
            id:'outline',
            source:"guizhou",
            type:'line',
            paint:{
                "line-color":'#fff',
                "line-width":3
            },
//            filter:['==','$type','LineString']
            filter: ["all", ['==','$type','LineString'], ["==", "Name", searchVal]]

        });
        map.addLayer({
            id:'polygon',
            source:"guizhou",
            type:'fill',
            paint:{
                "fill-color": "#f9f5ed"
            },
//            filter:['==','$type','Polygon']

            filter: ["all", ['==','$type','Polygon'], ["==", "Name", searchVal]]

        },"a7371364f61c45c294b7571c141eaf2f")
    }
</script>

</html>